<template>
    <div class="side">
        <a-space class="wrapper">
            <div class="button1">
                <a-button 
                class="custom-buttom" 
                size="large"
                @click="handleaddchat">
                    新建聊天
                </a-button>    
            </div>            
            <a-scrollbar style="height:calc(100vh - 200px);overflow: auto;">
                <history />
            </a-scrollbar>
            <div class="button2">
                <a-button
                class="cleanlist"
                size="large"
                @click="handleclean"
                ><icon-delete />清空历史记录</a-button>                
            </div>

        </a-space>
    </div>
</template>

<script setup lang="ts">
import history from './history.vue'

const handleaddchat = () => {
    // 将历史id置为空
}

const handleclean = () => {
    // 清空聊天记录
}
</script>

<style lang="less" scoped>
.side {
    background-color: #EFECF6;
    align-content: center;
    width: 270px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wrapper {
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    // 新建聊天按钮
    .button1 {
        // margin-top: 5px;
        height: 80px;
        // background-color: #f00;
        .custom-buttom {
            border-radius: 8px;
            margin-top:20px;
            margin-bottom: 20px;
            width: 200px;
            height: 50px;
            font-weight: 400;
            font-size: medium;
            background-color: #fff;
            color: #4955F5;
            border-color: #4955F5;
            cursor: pointer;
        }        
    }
    .button2 {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        align-items: center;
        height: 60px;
        .cleanlist {
            display: flex;
            align-items: center;
            width: 150px;
            border-radius: 8px;
            background-color: #fff;
            color: #4955F5;
            border-color: #4955F5;
        }        
    }
    .cleanlist:hover{
        color: #fff;
        border-color: #4955F5;
        background: linear-gradient(to left, #7F7FD5, #86A8E7, #91EAE4 );  
    }
    .custom-buttom:hover {   
        color: #fff;
        border-color: #4955F5;
        background: linear-gradient(to left, #7F7FD5, #86A8E7, #91EAE4 );  
    }
}
</style>
  